<template>
  <div
    class="label"
    :style="{ backgroundColor: labelColor }"
    @click="searchWay"
    @mouseenter="live2dAboutChooseWay"
  >
    {{ way }}
    <div class="after" :style="{ borderLeftColor: afterColor }"></div>
    <div class="top" :style="{ borderRightColor: topColor }"></div>
    <!-- <div class="bottom" :style="{borderRightColor:bottomColor}"></div> -->
  </div>
</template>

<script setup lang="ts">
import Bus from "../bus";
import { defineProps, defineEmits, ref, onMounted } from "vue";
import axios from "@/http";
const $emit = defineEmits(["searchByWay"]);
const props = defineProps(["way"]);

const test = ref<string>("0.2");
const labelColor = ref<string>("");
const afterColor = ref<string>("");
const topColor = ref<string>("");
const bottomColor = ref<string>("");

onMounted(() => {
  chooseColor(props.way);
});

const live2dAboutChooseWay = () => {
  Bus.$emit("live2dAboutChooseWay", props.way);
};
const searchWay = () => {
  const way = props.way === "全部" ? null : props.way;
  Bus.$emit("searchByWay", way);
};

const chooseColor = (way: string) => {
  switch (way) {
    case "全部":
      renderColor("rgba(202, 151, 254, 0.7)");
      break;
    case "vue":
      renderColor("rgba(65, 184, 131, 0.7)");
      break;
    case "react":
      renderColor("rgba(130, 215, 247, 0.7)");
      break;
    case "node":
      renderColor("rgba(2, 110, 0, 0.7)");
      break;
    case "js":
      renderColor("rgba(253, 211, 3, 0.7)");
      break;
    case "css":
      renderColor("rgba(1, 112, 230, 0.7)");
      break;
    case "其他":
      renderColor("rgba(171, 97, 115, 0.7)");
      break;
    case "随笔":
      renderColor("rgba(106, 106, 106, 0.7)");
      break;
    default:
      renderColor("rgba(171, 97, 115, 0.7)");
  }
};
const renderColor = (color: string) => {
  labelColor.value = color;
  afterColor.value = color;
  topColor.value = color;
  bottomColor.value = color;
};
</script>

<style lang="scss" scoped>
.label {
  user-select: none;
  cursor: url("../assets/img/cur/mais.png"), default;
  position: absolute;
  width: 70px;
  height: 26px;
  text-align: center;
  line-height: 26px;
  font-size: 13px;
  // font-weight: 900;
  // background-color: red;
  transition: all 0.4s;
  z-index: 5;
  color: #444;
  font-weight: 400;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  &:hover {
    color: #fff;
    transform: translateX(20px);
  }
}
.after {
  content: "";
  position: absolute;
  left: 70px;
  top: 0;
  border-top: 13px solid;
  border-left: 13px solid;
  border-bottom: 13px solid;
  border-right: 13px solid;
  border-right-color: transparent !important;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
}
.top {
  position: absolute;
  left: 60px;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 10px;
  background-color: #fff;
}
.bottom {
  position: absolute;
  left: -30px;
  top: 7px;
  border-top: 7px solid;
  border-left: 15px solid;
  border-bottom: 7px solid;
  border-right: 15px solid;
  border-left-color: transparent !important;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
}
</style>
